<script>

import {Search} from "@element-plus/icons-vue";
import {defineComponent} from "vue";
import store from "../../store/index.js";
import {CONSTANT} from "../../constant/constant.js";
import ClipboardJS from "clipboard";
import {ElMessage, ElNotification} from "element-plus";
import request from "../../utils/Request.js";

export default defineComponent({
  computed: {
    store() {
      return store
    },
    Search() {
      return Search
    }
  },
  data() {
    return {
      BASE_URL: CONSTANT.MOCK_BASE_URL + store.state.user.id,
      keyword: '',
      clipboard: null
    }
  },
  methods: {
    editMock(index) {
      request({
        url: '/api/mock/mock/' + store.state.mocks[index].id,
        method: 'get',
      })
          .then(({data}) => {
            if (data.code === 0) {
              store.state.addMock = data.data
              store.state.addMock.responseHeaders = JSON.parse(data.data.responseHeaders)
              store.state.addMockDialogVisible = true
            }
          })
    },
    deleteMock(index) {
      request({
        url: '/api/mock/mock/remove',
        method: 'post',
        params: {
          id: store.state.mocks[index].id
        }
      })
          .then(({data}) => {
            if (data.code === 0) {
              store.state.mocks.splice(index, 1)
              ElMessage.success('删除成功')
            } else {
              ElMessage.error(data.msg)
            }
          })
    },
    listMock() {
      request({
        url: '/api/mock/mock/list',
        method: 'get',
        params: {
          keyword: (this.keyword === '' ? null : this.keyword)
        }
      })
          .then(({data}) => {
            if (data.code === 0) {
              store.state.mocks = data.data
            } else {
              ElMessage.error(data.msg)
            }
          })
    }
  },
  created() {
    // 获取Mock配置列表
    this.listMock()

    // 点击复制请求路径
    this.clipboard = new ClipboardJS('#tagCopyUrl', {
      text: function (trigger) {
        return trigger.getAttribute('data-clipboard-text').valueOf()
      }
    }).on('success', function (e) {
      ElNotification({
        title: '复制成功',
        message: '成功复制URL',
        type: 'success'
      })
      e.clearSelection();
    }).on('error', function (e) {
      console.log(e);
    });

  },
  beforeUnmount() {
    this.clipboard.destroy()
  }
})

</script>

<template>
  <el-row>
    <el-col :span="3">
      <el-button round type="primary" @click="store.state.addMockDialogVisible = true">
        创建Mock
      </el-button>
    </el-col>
    <el-col :span="2">
      <el-button plain round type="primary" @click="listMock">
        刷新
      </el-button>
    </el-col>

    <el-col :span="5" :offset="13">
      <el-input
          v-model="keyword"
          placeholder="请输入搜索的关键词"
          clearable
          :prefix-icon="Search"
          maxlength="64"
      >
        <template #append>
          <el-button
              @click="listMock">
            搜索
          </el-button>
        </template>
      </el-input>
    </el-col>
  </el-row>

  <el-table :data="store.state.mocks" style="width: 100%" stripe>
    <el-table-column prop="name" label="接口名称" width="300" align="center"/>
    <el-table-column prop="method" label="请求方式" width="100" align="center">
      <template #default="scope">
        <el-tag type="success" size="large">
          {{ scope.row.method }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="path" label="请求路径" width="500" align="center">
      <template #default="scope">
        <el-tag type="info" size="large" id="tagCopyUrl" :data-clipboard-text="BASE_URL + scope.row.path">
          {{ BASE_URL + scope.row.path }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="operate" label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" plain @click="editMock(scope.$index)">编辑</el-button>
        <el-popconfirm title="是否删除？" @confirm="deleteMock(scope.$index)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

</template>

<style scoped>

</style>